<template>
    <el-dialog :visible.sync="show" title="推广设置" center :before-close="cancel">
        <div>
            <el-button style="margin-bottom:5px" icon="el-icon-plus" type="success" plain size="medium" @click="add" circle></el-button>
            <el-row>
                <el-table :data="list" highlight-current-row empty-text="点击左上角的加号按钮添加数据">
                    <el-table-column label="操作" align="center" width="100">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-minus" type="danger" plain size="medium" @click="sub(scope.$index)"
                                circle></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="推广员" align="center">
                        <template slot-scope="scope">
                            <el-select clearable filterable v-model="scope.row.userId">
                                <el-option v-for="item in userList" :value="item.id" :label="item.name"
                                    :key="item.id"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="推广规则" align="center">
                        <template slot-scope="scope">
                            <el-select clearable filterable v-model="scope.row.promoteRuleId">
                                <el-option v-for="item in promoteRuleList" :value="item.id" :label="item.name"
                                    :key="item.id"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="confirm">
                确定
            </el-button>
            <el-button @click="cancel">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import AuthApi from "@/api/system/auth"
import PromoteRuleApi from "@/api/operation/promoteRule"
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },
        type:{
            type:Number|String,
            default:1
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            userList: [],
            promoteRuleList: [],
        }
    },
    mounted(){
        this.getPromoterList()
        this.getPromoteRuleList()
    },
    methods: {
        getPromoterList(){
            AuthApi.listIdNameAdmin().then(res=>{
                this.userList = res.data
            })
        },
        getPromoteRuleList(){
            PromoteRuleApi.promoteRuleList({ruleType:this.type}).then(res=>{
                console.log(res.data)
                this.promoteRuleList = res.data
            })
        },
        add() {
            this.list.push({
                userId: "",
                promoteRuleId: ""
            })
        },
        sub(index) {
            this.list.splice(index, 1)
        },
        confirm() {
            let temp = this.list.filter(item=>item.userId||item.promoteRuleId)
            this.list.length = 0
            this.list.push.apply(this.list,temp)
            let flag = this.list.some(item=>{
                if(!item.userId){
                    this.$message.error("请选择推广员")
                    return true
                }
                if(!item.promoteRuleId){
                    this.$message.error("请选择推广规则")
                    return true
                }
            })
            if(flag)return 


            if(this.list.length==0){
                this.$message.error("请至少添加一条数据")
            }
            this.$confirm("确认提交吗？","提示",{}).then(()=>{
                this.$emit("confirm")
            })
            
        },
        cancel() {
            this.$emit("cancel")
        }
    },
}
</script>

<style lang="scss" scoped></style>